<template>
  <div
    class="screen"
    style="
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      background-color: #fff;
    "
  >
    <header class="screen-header">
      <span class="header-title">GIS应用</span>
      <span class="header-info"
        >共<span style="color: rgb(76, 125, 255)">{{ currentPageList.length }}</span
        >个</span
      >
    </header>
    <main class="screen-main">
      <div class="toolBar">
        <search-box ref="SearchForm" />
      </div>
      <div class="screens-container">
        <el-scrollbar class="screen-list-scrollbar">
          <div class="screen-list" infinite-scroll-disabled="loadPageDisabled">
            <li class="create-component" v-if="authorityManage">
              <div class="create-component-view" @click="createCommand()">
                <!-- <div class="VISUAL icon-xinzeng add-screen-logo"></div> -->
                <el-icon color="blue" size="26px"><Plus /></el-icon>
                <div class="add-screen-title">创建地球</div>
              </div>
            </li>
            <PageItem
              v-for="template in currentPageList"
              :key="template.name"
              :des="template"
              :authorityManage="authorityManage"
            />
          </div>
        </el-scrollbar>
      </div>
    </main>

    <el-dialog
      v-model="createDialogVisible"
      title="创建地球场景"
      width="500"
      draggable
      class="creat-page"
    >
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="场景名称：" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="备注：" prop="desc">
          <el-input v-model="ruleForm.desc" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="onCancel()">取消</el-button>
          <el-button type="primary" @click="onCreateNewPage()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import PageItem from "./pageItem.vue";
import type { FormRules } from "element-plus";
import apiPage from "@/api/page";

import { roleInit } from "@/utils/authority.ts";

const authorityManage = ref(false);

const currentPageList = ref([]);

const createDialogVisible = ref(false);

interface RuleForm {
  name: string;
  desc: string;
}

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "请输出场景名称", trigger: "blur" },
    { min: 3, max: 128, message: "长度在3到128之间", trigger: "blur" },
  ],
});
const ruleForm = reactive<RuleForm>({
  name: "",
  desc: "",
});

const createCommand = () => {
  createDialogVisible.value = true;
};

const initPages = async () => {
  const role = await roleInit();
  authorityManage.value = role?.authorityManage;

  if (role?.authorityRead) {
    const res: any = await apiPage.getPageList({
      containerKey: {
        name: "",
        namespace: "",
      },
      pageIndex: 1,
      pageSize: 9999,
      extension: "json",
      displayName: "",
      resourceType: "insightarts-page",
      version: "v0",
    });
    if (res?.code === 2000010000) {
      currentPageList.value = res.data.items;
    }
  }
};

const onCreateNewPage = async () => {
  const res = await apiPage.createNewPage({
    containerKey: {
      name: "",
      namespace: "",
    },
    displayName: ruleForm.name,
    logicPath: `/`,
    localPart: ruleForm.name,
    namespace: "/insightarts-page",
    content: "",
    description: ruleForm.desc,
    properties: {
      pageType: "page",
    },
  });
  if (res?.code === 2000010000) {
    // currentPageList.value = res.data.items;
    createDialogVisible.value = false;
    location.reload();
  }
};

const onCancel = () => {
  createDialogVisible.value = false;
};

onMounted(() => {
  initPages();
});
</script>

<style lang="scss" scoped>
.screen {
  height: 100%;
  .screen-header {
    border-bottom: 1px solid rgba(0, 16, 47, 0.06);
    padding: {
      left: 10px;
      bottom: 17px;
      top: 17px;
    }
    .header-title {
      width: 64px;
      height: 21px;
      font-size: 16px;
      // font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
      font-weight: bold;
      color: #2d374b;
    }
    .header-info {
      margin-left: 12px;
      width: 37px;
      height: 19px;
      font-size: 14px;
      font-family: MicrosoftYaHei;
      color: #2d374b;
      line-height: 19px;
    }
  }
  .screen-main {
    height: 100%;
    .toolBar {
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      ::v-deep .search-tool {
        border: 1px solid #d9dbe0;
        .input-tool {
          width: 316px;
          height: 100%;
          background: #ffffff;
          .el-input__inner {
            border: none;
            border-radius: 0;
          }
        }
        .select-tool {
          height: 100%;
          width: 160px;
          background: #ffffff;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          .el-input__inner {
            border-radius: 1px;
            border: none;
            border-right: 1px solid #d9dbe0;
          }
        }
        .button-tool {
          border: none;
          background-color: #ffffff;
        }
      }
      .button-group {
        min-width: 300px;
        display: flex;
        justify-content: space-between;
        height: 32px;

        > button {
          width: 86px;
          height: 100%;
          background: #f0f1f3;
          border-radius: 2px;
          border: 1px solid #d9dbe0;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #a3aec5;
          line-height: 20px;
        }
        .button-actived {
          cursor: pointer;
          background: #0046ff;
          color: white;
        }
        .button-actived-normal {
          cursor: pointer;
          background: #fff;
          color: #2d374b;
        }
      }
    }
    .screens-container {
      margin-top: 4px;
      padding: 0 20px 20px 20px;
      overflow: hidden;
      .screen-list-scrollbar {
        height: calc(100% - 120px);
        ::v-deep .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
      height: 100%;
      overflow: hidden;
      .screen-list {
        margin-top: 10px;
        width: 100%;
        height: 240px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 40px;
        @media (min-width: 1725px) and (max-width: 2148px) {
          & {
            grid-template-columns: repeat(5, 1fr);
          }
        }
        @media (min-width: 1300px) and (max-width: 1725px) {
          & {
            grid-template-columns: repeat(4, 1fr);
          }
        }
        @media (min-width: 877px) and (max-width: 1300px) {
          & {
            grid-template-columns: repeat(3, 1fr);
          }
        }
        @media (min-width: 604px) and (max-width: 876px) {
          & {
            grid-template-columns: repeat(2, 1fr);
          }
        }
        @media (max-width: 604px) {
          & {
            grid-template-columns: repeat(1, 1fr);
          }
        }
        > li {
          list-style: none;
        }
        .create-component {
          &::before {
            content: "";
            padding-top: 75%;
            float: left;
          }
          &::after {
            content: "";
            display: block;
            clear: both;
          }
          height: 100%;
          background: #ffffff;
          border-radius: 4px;
          border: 1px solid #d3d9e6;
          position: relative;
          cursor: pointer;
          &-view {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            .add-screen-logo {
              width: 38px;
              height: 38px;
              font-size: 38px;
              font-weight: 100;
              color: #0046ff;
            }
            .add-screen-title {
              width: 56px;
              font-size: 14px;
              font-family: MicrosoftYaHei;
              color: #2d374b;
              margin-top: 10px;
            }
          }
        }
      }
    }
    .screen-container-footer {
      display: flex;
      justify-content: center;
      bottom: 0;
      width: 100%;
    }
  }
}
</style>
<style lang="scss">
.export-result-ul {
  .export-result-li {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .export-result-name {
      padding: 10px;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .export-result-icon_success {
      color: green;
    }
  }
}
.screen {
  .el-dialog__footer {
    padding-top: 8px;
    .el-button {
      padding: 8px 16px;
    }
  }
  .delete-dialog {
    .delete-body {
      display: flex;
      .svg-icon {
        width: 24px;
        height: 21px;
        margin-right: 12px;
      }
    }
    .change-body {
      display: flex;
      align-items: center;
      .svg-icon {
        width: 24px;
        height: 21px;
        margin-right: 12px;
      }
    }
  }
}
.creat-page {
  position: absolute;
  // left: 345px;
  // top: 80px;
  width: 720px;
  // height: 600px;

  .el-dialog__footer {
    padding-top: 8px;
    .el-button {
      padding: 8px 16px;
    }
  }
}
</style>
